<script setup lang='ts'>
import { storeToRefs } from 'pinia'
import { useLangStore } from '@/stores/lang'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()

let langStore = useLangStore()
const userStore = useUserStore()

let { lang } = storeToRefs(langStore)

// 切换语言
const toChangeLang = (langid) => {
    // 切换路由
    let path = router.currentRoute.value.path
    let query = router.currentRoute.value.query

    if (path.includes(`/${langid}`)) return
    // 判断当前路由是否包含cn或en
    if (path.includes('/cn') || path.includes('/en')) {
        // 判断当前路由是否包含cn或en
        if (path.includes('/cn')) {
            path = path.replace('/cn', `/${langid}`)
        } else if (path.includes('/en')) {
            path = path.replace('/en', `/${langid}`)
        }
    }
    router.replace({ path, query })
    langStore.changeLang(langid)
    // 水印
    let token = localStorage.getItem('token')
    if (token) {
        userStore.getCompanyName()
        userStore.setWaterMark('',true)
    } else {
        userStore.setWaterMark(' ',false)
    }
}
</script>
<template>
    <div class="langinfobox">
        <div :class="[item.id, item.active ? 'active' : '']" v-for="item in lang" :key="item.id"
            @click="toChangeLang(item.id)">{{ item.name }}</div>
    </div>
</template>

<style lang="scss" scoped>
.langinfobox {
    position: relative;
    z-index: 9;
    padding-top: 26px;
    margin-left: 30px;
    display: flex;
    .cn,
    .en {
        width: 145px;
        height: 38px;
        font-size: 1.7rem;
        color: #ffffff;
        border: 2px solid #ffffff;
        box-sizing: border-box;
        background: none;
        border-radius: 19px;
        line-height: 36px;
    }
    .en {
        margin-left: 28px;
        line-height: 33px;
        font-family: 'Helvetica';
    }
    .active {
        border: 2px solid #004d91;
        box-sizing: border-box;
        background: #004d91;
    }
}
</style>